<template>
   
    <div class="login">
        <div class="login-form">
            <div class="login-form-header">
                <img style="width: 100px; height: 100px;float: left;padding-right: 40px;" src="../assets/img/logo.png"
                     alt=""/>
                <div class="login-form-text">百色影吧 登录页面</div>
            </div>
            <div style="color: #91949c;font-weight: bolder">
                <p class="a">用户名</p>
                <el-input class="login-form-input" v-model="loginForm.username" placeholder="账 号"></el-input>
                <p class="a">密码</p>
                <el-input class="login-form-input" placeholder="密 码" v-model="loginForm.password" show-password></el-input>

        <el-input
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
        </div>
                <div style="padding-top: 10px">
                    <el-checkbox v-model="remember">记住密码</el-checkbox>
                    <div style="float: right">
                        <el-link href="/forget" style="font-weight: bolder;font-size: 14px;color: #91949c;"
                                 :underline="false">
                            忘记密码?
                        </el-link>
                    </div>
                </div>
                <el-button @click="postLogin" class="login-form-button" type="primary">登录</el-button>
            </div>
            <div class="login-form-footer">
                <el-link href="/register" style="font-weight: bolder;font-size: 16px;color: #91949c;"
                         :underline="false">
                   <p class="p">还没有账号？去注册</p> 
                    <i style="font-weight: bolder;font-size: 15px;color: black;" class="el-icon-right"></i>
                </el-link>
            </div>
        </div>
    
</div>
</template>

<script>

    import {Login,getUserCode} from "../api/user"

    export default {
        data() {
            return {
                codeUrl: "",
                cookiePassword: "",
                
                loginForm: {
                 username: "",
                 password: "",
                 rememberMe: false,
                 code: "",
                 uuid: ""
      },
            }
        },
        created() {
    this.getCode();

  },
        methods: {
             // 获取验证码
             getCode(){
             getUserCode().then(res =>{
             this.codeUrl = "data:image/gif;base64," + res.data.img;
             console.log("这是验证码："+this.codeUrl)
             this.loginForm.uuid = res.data.uuid;
           })
             },
   

            postLogin() {
              /*  const LoginData = {
                    username: this.username,
                    password: this.password,
                    remember: this.remember
                };*/
                Login(this.loginForm).then(res => {
                    console.log("----"+res.data)
                    console.log("---1-"+res.user.id)
                    console.log("--2--"+res.code)
                    // 客户端保存 token
                    localStorage.setItem("token", res.data);
                    localStorage.setItem("uid", res.user.id);
                    this.$router.push('/')
                    globalData.userStatus = true
                    globalData.username = 'zhangsan'
                    //this.$router.push({path: '/', replace: true})
                    
                })
            }


        }
    }
</script>

<style scoped>

    .login {
        width: 1530px;
        height: 650px;
        background: #FFFFFF;
        background-image: url("../../static/beijing3.jpeg");
    }

    .login-form {
        width: 500px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -60%);
        letter-spacing: 2px;
    }

    .login-form-header {
        height: 1px;
        padding-left: 45px;
        padding-bottom: 100px;
        padding-top: 35px;
    }

    .login-form-text {
        color: #000000;
        font-weight: bold;
        font-size: 30px;
        padding-top: 30px;
    }

    .login-form-input {
        margin-bottom: 10px;
    }

    .login-form-button {
        border-radius: 3px;
        width: 100%;
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 2px;
        height: 60px;
        background: #5a84fd;
        box-shadow: 0 5px 30px rgb(0 66 8.5%);
        margin-top: 35px;
    }

    .login-form-footer {
        font-weight: bolder;
        color: #0c0c0c;
        padding-top: 40px;
        text-align: center;
       
    }

.el-input__inner {
        height: 48px;
    }

    .el-checkbox {
        color: #91949c;
        font-weight: bolder;
        font-size: 15px;
    }
    .login-code {
  width: 33%;
  height: 38px;
  float: right;
 
}
.a{
    color: #000000;
}
.p{
    color: #000000;
}

</style>
